useFormStatus basics tutorial | Everything you need to know

By Anjan Shomodder
Sun Mar 17 2024
react
2 views
3 min read

In this tutorial, we will learn about the basics of useFormStatus. We will cover everything you need to know about useFormStatus. Let's get started.

Video

Why do we need useFormStatus?

When user submits a form and the form is being processed, it is a good practice to show a loading indicator to the user and disable the submit button. Previously you would create a separate state and manipulate the state inside submit handler. Similar to this:

1const Form = () => {
2    const [loading, setLoading] = useState(false)
3
4    const handleSubmit = async e => {
5        e.preventDefault()
6        setLoading(true)
7        // ... your form submission logic
8        setLoading(false)
9    }
10
11    return (
12        <form onSubmit={handleSubmit}>
13            <input type='text' name='name' />
14            <button type='submit' disabled={loading}>
15                Submit
16            </button>
17        </form>
18    )
19}

This is fine but it would have been nice if react could handle this logic for us. And this is where useFormStatus comes in.

How to use `useFormStatus`?

1// Form.jsx
2
3const Form = () => {
4    const handleSubmit = async data => {
5        console.log(data.get('name')) // Prints the input value
6        // ... your form submission logic
7    }
8
9    return (
10        <form action={handleSubmit}>
11            <input type='text' name='name' />
12            <SubmitButton />
13        </form>
14    )
15}

1// SubmitButton.jsx
2import { useFormStatus } from 'react-dom'
3
4const SubmitButton = () => {
5    const { pending } = useFormStatus()
6
7    return (
8        <button type='submit' disabled={pending}>
9            Submit
10        </button>
11    )
12}

Explanation:

Like before we have a handleSubmit function but this time we passed in action prop.
handleSubmit takes a argument which is the FormData. You can get the input value using the get method.
We have a separate submit button. And we use the useFormStatus hook.
useFormStatus returns an object with a pending property. pending is true when the form is being submitted and false when the form submission is complete.

useFormStatus actually returns four things:

pending: true when the form is being submitted and false when the form submission is complete.
action: The action function passed to the form.
data: The FormData object.
method: The submit method. GET or POST etc.

action, data and method are null when the form is not being submitted.

So, this is how you can use useFormStatus to handle form submission status.

Things to keep in mind

Form submission function should be passed to the form using the action prop.
The handler function has to be async or return a promise.
useFormStatus should be used inside a component that is a child of the form.

1// This will not work
2const Form = () => {
3    const { pending } = useFormStatus()
4    return (
5        <form>
6            <input type='text' name='name' />
7            <button type='submit' disabled={pending}>
8                Submit
9            </button>
10        </form>
11    )
12}
13
14// This will work
15const Form = () => {
16    return (
17        <form>
18            <input type='text' name='name' />
19            <SubmitButton />
20        </form>
21    )
22}
23
24const SubmitButton = () => {
25    const { pending } = useFormStatus()
26    return (
27        <button type='submit' disabled={pending}>
28            Submit
29        </button>
30    )
31}

That's it for this tutorial. I hope you find this tutorial helpful. If yes, please subscribe to my channel for more tutorials like this. If you have any questions, feel free to ask in the comments below.

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.